<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Chenqiu
 * @LastEditTime: 2021-09-23 09:22:51
-->
<template>
  <!-- 2.设置图表容器 容纳容器 -->
  <!-- 如何在vue中设置dom节点 -->
  <div ref="root" style="height: 95%"></div>
</template>
<script>
// // 从g2plot对象中引入折线图
// import { Line } from "@antv/g2plot"
// // 1.引入组件库
// export default {
//   data() {},
//   // dom创建完毕 但是没有挂载————获取不到dom，调用方法
//   created(){},
//   // 在onMounted之后执行 页面dom节点创建完毕 挂载完毕————获取dom
//   mounted(){
//     this.initCharts();
//   },
//   methods: {
//     // 封装折线图图表方法
//     initCharts() {
//       // 3.创建一个图表实例
//       let line = new Line(this.$refs['root'], {
//         data: [
//           { year: "1991", value: 3 },
//           { year: "1992", value: 4 },
//           { year: "1993", value: 3.5 },
//           { year: "1994", value: 5 },
//           { year: "1995", value: 4.9 },
//         ],
//         xField:'year',
//         yField:'value',
//         color:'cyan',
//         // x轴斜字体
//         xAxis: {
//           label: {
//             rotate: -45,
//             offset: 25,
//             style: {
//               fill: "white",
//               fontFamily: "TencentSans",
//               fontSize: 16,
//             },
//           },
//         },
//         // 图表背景样式 放置鼠标展示细节
//         tooltip: {
//           fields: ["ratio", "value"],
//           domStyles: {
//             "g2-tooltip": {
//               // 背景框样式
//               padding: "10px",
//               background: "rgba(47, 6, 170, 0.8)",
//               border: "1px solid #00FFFF",
//               color: "#FFFFFF",
//               fontSize: "16px",
//               lineHeight: "2em",
//               fontFamily: "TencentSans",
//             },
//           },
//         },
//       });
//       // 渲染
//       line.render();
//     },
//   },
// };
import { Waterfall } from "@antv/g2plot";
// 1.引入组件库
export default {
  data() {
    return {};
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let waterFallPlot = new Waterfall(this.$refs["root"], {
        data: [
          { month: "2019", value: 23000000 },
          { month: "Jan", value: 2200000 },
          { month: "Feb", value: -4600000 },
          { month: "Mar", value: -9100000 },
          { month: "Apr", value: 3700000 },
          { month: "May", value: -2100000 },
          { month: "Jun", value: 5300000 },
          { month: "Jul", value: 3100000 },
          { month: "Aug", value: -1500000 },
          { month: "Sep", value: 4200000 },
          { month: "Oct", value: 5300000 },
          { month: "Nov", value: -1500000 },
          { month: "Dec", value: 5100000 },
        ],
        padding: "auto",
        appendPadding: [20, 0, 0, 0],
        xField: "month",
        yField: "value",
        meta: {
          month: {
            alias: "月份",
          },
          value: {
            alias: "销售量",
            formatter: (v) => `${v / 10000000} 亿`,
          },
        },
        /** 展示总计 */
        total: {
          label: "2020",
        },
        color: ({ month, value }) => {
          if (month === "2019" || month === "2020") {
            return "#96a6a6";
          }
          return value > 0 ? "#f4664a" : "#30bf78";
        },
        legend: {
          custom: true,
          items: [
            {
              name: "Increase",
              value: "increase",
              marker: { symbol: "square", style: { r: 5, fill: "#f4664a" } },
            },
            {
              name: "Decrease",
              value: "decrease",
              marker: { symbol: "square", style: { r: 5, fill: "#30bf78" } },
            },
            {
              name: "Total",
              value: "total",
              marker: { symbol: "square", style: { r: 5, fill: "#96a6a6" } },
            },
          ],
        },
        label: {
          style: {
            fontSize: 10,
          },
          layout: [{ type: "interval-adjust-position" }],
          background: {
            style: {
              fill: "#f6f6f6",
              stroke: "#e6e6e6",
              strokeOpacity: 0.65,
              radius: 2,
            },
            padding: 1.5,
          },
        },
        waterfallStyle: () => {
          return {
            fillOpacity: 0.85,
          };
        },
      });
      waterFallPlot.render();
    },
  },
};
</script>